<template>
  <div class="dashboard-container">
    <div class="header">
      <h1>员工工作台</h1>
      <div class="user-info">
        <span>欢迎，{{ userStore.userInfo?.realName || '用户' }}</span>
        <el-button type="danger" @click="handleLogout">退出登录</el-button>
      </div>
    </div>

    <div class="content">
      <el-card class="welcome-card">
        <h2>欢迎使用企业福利商城</h2>
        <p>您已成功登录员工账户！</p>

        <div class="stats">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="stat-item">
                <div class="stat-value">¥{{ userStore.userInfo?.accountBalance || 0 }}</div>
                <div class="stat-label">账户余额</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-item">
                <div class="stat-value">{{ userStore.getUserRoles.length }}</div>
                <div class="stat-label">角色数量</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-item">
                <div class="stat-value">{{ userStore.getUserPermissions.length }}</div>
                <div class="stat-label">权限数量</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()

const handleLogout = async () => {
  try {
    await userStore.logout()
    ElMessage.success('已退出登录')
    // 跳转到登录页
    router.push('/login')
  } catch (error) {
    console.error('退出登录失败:', error)
    // 即使出错也跳转到登录页
    router.push('/login')
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  h1 {
    margin: 0;
    color: #303133;
  }
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;

  span {
    font-size: 16px;
    color: #606266;
  }
}

.content {
  .welcome-card {
    text-align: center;

    h2 {
      color: #409EFF;
      margin-bottom: 10px;
    }

    p {
      color: #606266;
      margin-bottom: 30px;
    }
  }
}

.stats {
  margin-top: 30px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, #409EFF 0%, #64b5ff 100%);
  color: white;
  border-radius: 8px;

  .stat-value {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
  }

  .stat-label {
    font-size: 14px;
    opacity: 0.9;
  }
}
</style>
